<!--  -->
<template>
  <div class="user-course-wrap">
    <!-- 顶部导航栏-->
    <van-sticky class="my-TopBar">
      <van-nav-bar
        title="海底探索"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 功能列表-->
    <div class="commonWrap wrap">
      <van-cell
        title="课程学习"
        is-link
        :to="{
          name: 'CourseLearning',
          params: { courseId: data.course.courseId },
        }"
      >
        <template #icon>
          <van-icon name="bookmark" color="#87d4eb" size="24px" />
        </template>
      </van-cell>
    </div>
    <div class="commonWrap wrap">
      <van-cell
        title="课程信息"
        is-link
        :to="{
          name: 'CourseInfo',
          params: { courseId: data.course.courseId },
        }"
      >
        <template #icon>
          <van-icon name="column" color="#87d4eb" size="24px" /> </template
      ></van-cell>
      <van-cell title="课程作业" is-link to="/Course/WorkList">
        <template #icon>
          <van-icon name="todo-list" color="#87d4eb" size="24px" /> </template
      ></van-cell>
    </div>
    <div class="commonWrap wrap">
      <van-cell title="成绩" is-link to="/Course/UserCourse">
        <template #icon>
          <van-icon name="success" color="#87d4eb" size="24" /> </template
      ></van-cell>
      <van-cell title="课程评价" is-link to="/Course/UserCourse">
        <template #icon>
          <van-icon name="comment" color="#87d4eb" size="24px" /> </template
      ></van-cell>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance } from "vue";
export default {
  setup() {
    const { ctx, proxy } = getCurrentInstance();
    const state = reactive({});
    const data = reactive({
      course: {
        courseId: 1,
        name: "",
      },
    });
    function onClickLeft() {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push("/search");
    }
    //用户课程菜单栏页面，保留上一个页面传过来的课程ID
     function mygetCourseById() {
       console.log(this.$route.params.courseId)
      proxy.$axios.course
        .getCourseById(this.$route.params.courseId)
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            data.course.courseId = res.data.data;
          }
        });
    };
    return {
      data,
      state,
      onClickLeft,
      mygetCourseById,
    };
  },
  created() {
    //路由传参，测试接收传过来的课程ID
    //console.log(this.$route.params.courseId);
    //保留传过来的课程ID
    this.mygetCourseById();
  },
};
</script>
<style lang='scss' scoped>
.wrap {
  margin-bottom: 5px;
  border-radius: 5px;
  padding-bottom: 0;
  padding-top: 0;
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    .van-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
